<div class="article">
  <!-- 按钮 -->
  <div class="btns" style="margin-bottom: 10px;">
    <button id="btn_add" type="button" class="btn btn-primary">新增</button>
    <button id="btn_batchDel" type="button" class="btn btn-danger">批量删除</button>
  </div>
  <!-- 表格 -->
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col"><input type="checkbox"></th>
        <th scope="col">文章标题</th>
        <th scope="col">所属栏目</th>
        <th scope="col">发布时间</th>
        <th scope="col">状态</th>
        <th scope="col">封面</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <!-- 新增/修改模态框 -->
  <div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal_title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <input type="text" id="form_id" style="display: none;">
            <div class="form-group">
              <label for="form_title">文章标题</label>
              <input type="text" class="form-control" id="form_title" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="form_categoryId">所属栏目</label>
              <select class="form-control" id="form_categoryId">

              </select>
            </div>
            <div class="form-group">
              <input type="hidden" id="imagepath" name=""> <!-- 保存的图片id 用于表单提交 -->
              <span id="upload_duixiang">图片上传</span> <!-- 上传按钮 -->
              <div class="show"></div> <!-- 输出图片 -->
              <pre id="geoJsonTxt"></pre> <!-- 输出文件的json数据 -->
            </div>
            <div class="form-group">
              <div id="editor"></div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="btn_save">保存</button>
        </div>
      </div>

    </div>
  </div>
  <!-- 分页插件容器 -->
  <div id="myPage"></div>
</div>
<script>
  // 图片ID
  var imgId;
  var token = localStorage.getItem('token');
  // 将接口的基路径封装成全局变量
  var baseUrl = 'http://127.0.0.1:7788';
  // 全局配置ajax请求头信息
  $.ajaxSetup({
    headers: {
      'Authorization': token
    },
  })
  pageQueryArticles(1);   // 调用分页查询方法
  findAllCategories();    // 调用查询栏目方法

  // 1.分页查询文章信息
  function pageQueryArticles(page) {
    $.ajax({
      url: baseUrl + '/article/pageQuery',
      method: 'GET',
      data: {
        page: page,
        pageSize: 5
      },
      success: function (res) {
        $('tbody').empty();   // 添加dom节点之前，先清空tbody
        res.data.list.forEach(function (item) {
          var publishTime = timestampToTime(item.publishTime)
          $(`
            <tr>
              <td><input type="checkbox" value="`+ item.id + `"></td>
              <td id="table_title">`+ item.title + `</td>
              <td id="table_category">`+ item.category.name + `</td>
              <td id="table_publishTime">`+ publishTime + `</td>
              <td id="table_status">`+ item.status + `</td>
              <td id="table_img"><img src="`+ item.source + `" alt="丢失" style="width:50px;height:50px;"></td>
              <td>
                <i class="iconfont icon-shanchu" id="btn_del"></i>
                <i class="iconfont icon-xiugai" id="btn_edit"></i>
              </td>
            </tr>
          `).appendTo($('tbody'))
        })
        // 调用分页插件          
        $("#myPage").sPage({
          page: page, //当前页码              
          pageSize: 5, //每页显示多少条数据，默认10条               
          total: res.data.total, //数据总条数,后台返回              
          backFun: function (page) { //点击分页按钮回调函数，返回当前页码                    
            pageQueryArticles(page);
          }
        });
      }
    })
  }
  // 2.时间戳转日期格式
  function timestampToTime(timestamp) {
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = date.getDate() + ' ';
    h = date.getHours() + ':';
    m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
    s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
    return Y + M + D + h + m + s;
  }
  // 3.点击新增按钮事件
  $('#btn_add').click(function () {
    // 商品图片上传
    a = $("#upload_duixiang").FraUpload({
      view: ".show",      // 视图输出位置
      url: "http://121.199.29.84:5588/file/upload", // 上传接口
      fetch: "img",        // 视图现在只支持img
      debug: false,        // 是否开启调试模式
      /* 外部获得的回调接口 */
      onLoad: function (e) {                    // 选择文件的回调方法
        console.log("外部: 初始化完成...");
      },
      breforePort: function (e) {         // 发送前触发
        console.log("文件发送之前触发");
      },
      successPort: function (e) {         // 发送成功触发
        console.log("文件发送成功");
        onload_image()
      },
      errorPort: function (e) {       // 发送失败触发
        console.log("文件发送失败");
        onload_image()
      },
      deletePost: function (e) {    // 删除文件触发
        console.log("删除文件");
        console.log(e);
        alert('删除了' + e.filename)
        onload_image()
      },
      sort: function (e) {      // 排序触发
        console.log("排序");
        onload_image()
      },
    });
    // 获取图片上传信息
    function onload_image() {
      var res = a.FraUpload.show();
      var ids = [];
      for (let k in res) {
        this_val = res[k]
        if (!empty(res[k]['is_upload']) && !empty(res[k]['ajax'])) {
          ajax_value = res[k]['ajax'];
          ids.push(ajax_value.data.id)
        }
      }
      imgId = res[0].ajax.data.id
      $("#imagepath").val(ids);
    }
    /**
     * 判断变量是否为空
     */
    function empty(value) {
      if (value == "" || value == undefined || value == null || value == false || value == [] || value == {}) {
        return true;
      } else {
        return false;
      }
    }
    // 初始化富文本编辑器
    var E = window.wangEditor
    var editor = new E("#editor");
    editor.create()
    // 打开模态框
    $('#myModal').modal('show');
  })
  // 4.保存按钮点击事件
  $('#btn_save').click(function () {
    // 获取表单输入框信息
    var id = $('#form_id').val();
    var title = $('#form_title').val();
    var categoryId = $('#form_categoryId').val();
    if (imgId) {
      var imgSrc = 'http://121.199.29.84:8888/group1/' + imgId;
    } else {
      var imgSrc;
    }
    var content = $('.w-e-text').html();
    var data;
    if (title && categoryId && content) {
      // 判断id是否为空
      if (id) {
        data = {
          id,
          title,
          categoryId,
          source: imgSrc,
          content
        }
      } else {
        data = {
          title,
          categoryId,
          source: imgSrc,
          content
        }
      }
      $.ajax({
        url: baseUrl + '/article/saveOrUpdate',
        method: 'POST',
        data: data,
        success: function (res) {
          pageQueryArticles(1);         // 重载数据
          $('#myModal').modal('hide');  // 隐藏模态框
          alert(res.message);           // 提示成功信息
        }
      })
    } else {
      alert('文章标题、所属栏目、内容不能为空！');
    }
  })
  // 5.获取所有栏目信息
  function findAllCategories() {
    $.ajax({
      url: baseUrl + '/category/findAll',
      method: 'GET',
      success: function (res) {
        $('#form_parentId').empty();    // 追加dom节点之前，先清空
        res.data.forEach(function (item) {
          $(`
            <option value="`+ item.id + `">` + item.name + `</option>
          `).appendTo($('#form_categoryId'))
        })
      }
    })
  }
</script>
<style>
  #upload_duixiang {
    background-color: #007bff;
    color: white;
    border-radius: 3px;
    padding: 0 5px;
    cursor: pointer;
  }
</style>